<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<html>
<head>
    <title>Title</title>
    <script src="../assets/js/views/vue.min.js"></script>
    <script type="text/javascript" src="../assets/js/echarts.js"></script>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css" type="text/css">
    <link rel="stylesheet" href="${assets}/css/views/department/addDepartment.scss">

    <script src="${js}/jquery-1.9.1.min.js"></script>
    <%--<link rel="stylesheet" href="${frames}/css/table.css" type="text/css">--%>
    <%--<link rel="stylesheet" href="${frames}/css/qulitity.css" type="text/css" type="text/css">--%>
    <script src="${js}/jquery.dataTables.js"></script>
    <link href="../assets/css/bootstrap-datetimepicker.css" type="text/css">
    <script src="../assets/js/bootstrap-datetimepicker.min.js"></script>
    <%--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">--%>
    <%--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">--%>
    <%--<link rel="stylesheet" href="../assets/css/bootstrapDatepickr-1.0.0.css">--%>
    <%--<script src="../assets/js/bootstrapDatepickr-1.0.0.min.js"></script>--%>
    <script src="${frames}/Chronic/laydate/laydate.js"></script>
    <script src="${assets}/js/views/bpAbnormal.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
            text-decoration:none;
            list-style:none;
        }
        html,body{
            height:100%;
        }
        body{
            width:98%;
        }
        h3 {
            width: 82px;
            height: 20px;
            font-family: MicrosoftYaHei;
            font-size: 20px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.4px;
            color: #2a3137;
        }
        .border{
            width: 10px;
            height: 10px;
            background-color: #35acfd;
            border-radius:50%;
            display:inline-block;
        }
        .title{
            width: 63px;
            height: 16px;
            font-family: PingFang-SC-Regular;
            font-size: 16.3px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
            margin-top:30px;
            margin-left:15px;
        }
        label{
            width: 70px;
            height: 41px;
            line-height:41px;
            font-family: PingFang-SC-Regular;
            font-size: 16.3px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #999999;
        }
        li span{
            height: 16px;
            font-family: PingFang-SC-Regular;
            font-size: 16.3px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #333333;
        }
        button{
            width: 90px;
            height: 30px;
            border-radius: 15px;
            border: solid 1px #35acfd;
            line-height: 17px;
            font-family: MicrosoftYaHei;
            font-size: 16px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0.3px;
            color: #35acfd;
            background:white;
            margin-left:76px;
        }
    </style>
</head>
<body>
<div id="main">
    <div style="width:99%;">
        <div class="illness" style="margin-top:20px;background-color: #ffffff;;">
            <h3 style="margin-top:15px;margin-bottom:16px;margin-left:19px;">个人中心</h3>
            <div>
                <div style="margin-left:40px;">
                    <span class="border"></span>
                    <span class="title">基本信息</span>
                    <ul style="margin-left:46px;margin-top:10px;">
                        <li>
                            <label for="">用户名</label>
                            <span>{{Infor.username}}</span>
                        </li>
                        <li>
                            <label for="">角色</label>
                            <span>{{roles}}</span>
                        </li>
                        <li>
                            <label for="">姓名</label>
                            <span>{{Infor.username}}</span>
                        </li>
                        <li>
                            <label for="">手机号</label>
                            <span>{{Infor.mobile}}</span>
                        </li>
                        <li>
                            <label for="">所属地</label>
                            <span>{{Infor.hospitalName}}</span>
                        </li>
                    </ul>
                    <span class="border"></span>
                    <span class="title">密码设置</span>
                    <ul  style="margin-left:46px;margin-top:10px;">
                        <li>
                            <label for="">密码</label>
                            <span>******</span>
                            <button @click="show()">修改</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<script>

    let vm = new Vue({
        el:'#main',
        data:{
            // 用户数据
            Infor:'',
            roles:''
        },
        mounted(){
            let that = this;
           // 初始化獲取數據
            $.ajax({
                url:'${URL_USER_GETUSERINFO}',
                type:"post",
                dataType:'json',
                success:function(data){
                   that.Infor = data.data
                    console.log(that.Infor)
                    that.Infor.roles.forEach((item)=>{
                       return that.roles = item.roleName
                    })
                }
            })
        },
        methods:{
            show(){
                window.parent.showNewModelIframe('${URL_USER_TOUPDATEPASSWORD}',800,400)
            }
        }
    })

</script>
</body>
</html>
